<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>

    <style>
        #center {
            width: 20%;
            /* margin: 0% 17.5% 0% 17.5%; */
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="center">
        <img id="light" src="../../img/off.png"> <br>

        <input type="button" value="点亮" onclick="on()">
        <input type="button" value="熄灭" onclick="off()">
        <br><br>

        <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
        <br><br>

        <input type="checkbox" name="hobby"> 电影
        <input type="checkbox" name="hobby"> 旅游
        <input type="checkbox" name="hobby"> 游戏
        <br>

        <input type="button" value="全选" onclick="checkAll()">
        <input type="button" value="反选" onclick="reverse()"> 
    </div>
</body>
<script src="../js/01js_test.js"></script>

</html>